import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { notFound } from "next/navigation";

import { revalidatePath } from "next/cache";

import { serverCaller } from "@/lib/trpc/server";

export const dynamic = "force-dynamic";

function youtubeId(url: string): string | null {

  try {

    const u = new URL(url);

    const host = u.hostname.replace(/^www\./, "");

    if (host === "youtu.be") {

      const id = u.pathname.slice(1);

      return /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : null;

    }

    if (host === "youtube.com" || host === "m.youtube.com") {

      if (u.pathname === "/watch") {

        const id = u.searchParams.get("v");

        return id && /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : null;

      }

      const m = u.pathname.match(/^\/(?:embed|shorts|live)\/([a-zA-Z0-9_-]{11})/);

      if (m) return m[1];

    }

    return null;

  } catch {

    return null;

  }

}

export default async function LivePage({

  params,

}: {

  params: Promise<{ slug: string }>;

}) {

  const { slug } = await params;

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const events = await caller.event.list({ cityId: city.id });

  const live = events.filter((e) => e.isLive);

  async function goLive(formData: FormData) {

    "use server";

    const id = String(formData.get("eventId") ?? "");

    const liveUrl = String(formData.get("liveUrl") ?? "").trim();

    if (!id || !liveUrl) return;

    await serverCaller().event.setLive({ id, isLive: true, liveUrl });

    revalidatePath(`/city/${slug}/live`);

    revalidatePath(`/city/${slug}`);

  }

  async function endLive(formData: FormData) {

    "use server";

    const id = String(formData.get("eventId") ?? "");

    if (!id) return;

    await serverCaller().event.setLive({ id, isLive: false });

    revalidatePath(`/city/${slug}/live`);

    revalidatePath(`/city/${slug}`);

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href={`/city/${slug}`} className="kicker hover:text-gold">

        ← {city.name}

      </Link>

      <p className="kicker mt-10 flex items-center gap-3 text-gold">

        <span className="inline-block h-2.5 w-2.5 animate-pulse rounded-full bg-gold" />

        Live · {city.metroLabel}

      </p>

      <h1 className="display mt-3 text-7xl sm:text-8xl">Live</h1>

      <p className="serif mt-5 max-w-xl text-xl text-ash">

        Catch a set live from {city.name}, or put your own set on. Drop a

        YouTube or Facebook live link and it shows up here.

      </p>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">On Now</h2>

          <span className="kicker text-ash">

            {String(live.length).padStart(2, "0")} live

          </span>

        </div>

        {live.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Nobody is live right now. Start a stream below and the set goes on

            here.

          </p>

        ) : (

          <ul className="mt-8 flex flex-col gap-12">

            {live.map((e) => {

              const ytId = e.liveUrl ? youtubeId(e.liveUrl) : null;

              return (

                <li key={e.id}>

                  <div className="flex items-end justify-between gap-5">

                    <h3 className="display text-2xl sm:text-3xl">{e.title}</h3>

                    <span className="kicker flex items-center gap-2 text-gold">

                      <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-gold" />

                      LIVE

                    </span>

                  </div>

                  {ytId ? (

                    <div className="mt-5 aspect-video w-full overflow-hidden border border-[var(--line)]">

                      <iframe

                        src={`https://www.youtube-nocookie.com/embed/${ytId}`}

                        title={e.title}

                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

                        allowFullScreen

                        className="h-full w-full"

                      />

                    </div>

                  ) : e.liveUrl ? (

                    <a

                      href={e.liveUrl}

                      target="_blank"

                      rel="noopener noreferrer"

                      className="kicker mt-5 inline-block bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

                    >

                      Watch live →

                    </a>

                  ) : null}

                  <form action={endLive} className="mt-4">

                    <input type="hidden" name="eventId" value={e.id} />

                    <button

                      type="submit"

                      className="kicker text-ash hover:text-bone"

                    >

                      End stream

                    </button>

                  </form>

                </li>

              );

            })}

          </ul>

        )}

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Go Live</h2>

          <span className="kicker">Put a set on</span>

        </div>

        {events.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Post a set on the city page first, then come back to take it live.

          </p>

        ) : (

          <form action={goLive} className="mt-6 flex flex-col gap-3">

            <select

              name="eventId"

              required

              defaultValue=""

              className="kicker border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none focus:border-gold"

            >

              <option value="" disabled className="bg-stage">

                CHOOSE A SET

              </option>

              {events.map((e) => (

                <option key={e.id} value={e.id} className="bg-stage">

                  {e.title.toUpperCase()}

                </option>

              ))}

            </select>

            <input

              name="liveUrl"

              required

              type="url"

              placeholder="Live stream URL (YouTube or Facebook live)"

              className="serif border-b border-[var(--line)] bg-transparent py-3 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

            />

            <div className="mt-2">

              <button

                type="submit"

                className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

              >

                Go live

              </button>

            </div>

          </form>

        )}

      </section>

      <SiteFooter />

    </main>

  );

}